<template>
  <div class="card">
       
    <ul>
      <li v-for="(item,index) in treeData" :key="index">
        <div class="item" :class="{'line-left':index!==0,'line-right':index!=treeData.length-1}">
          <div
            class="item-name"
            :class="{'line-bottom':item.child&&item.child.length>0,'line-top':!treeFirst}"
          >
            <!-- <div v-if="!treeFirst" class="reduce" @click="delChild(index)">-</div> -->
            <div>{{item.name}}({{item.type==1?'虚包':'实包'}})</div>
            <div v-show="!item.child" class="plus" @click="addChild(index,item.type)"> + </div>
          </div>
        </div>
        <tree-item v-if="item.child&&item.child.length>0" :tree-data="item.child" @addfn="addChild" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "TreeItem",
  props: {
    treeData: {
      type: Array,
      default: () => []
    },
    treeFirst: {
      //判断是否第一个
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    // 添加子元素
    addChild(index,type) {
      console.log('type:'+type)
      //this.$emit('addfn',index)
      if (this.treeData[index].child) {
        this.treeData[index].child.push({ name: "1" });
      } else {
        let arr= [{ name: "1",type:'1' },{ name: "9",type:'1',child: [{ name: "5",type:'1' }, { name: "6",type:'2' }]}];
        if(1){
          this.$set(this.treeData[index], "child",arr);
        }else{
          return
        }
      }
    },
    // 删除子元素
    delChild(index) {
      this.treeData.splice(index, 1);
    },
    test(){
      this.$emit('addfn')
    },
  }
};
</script>

<style lang="scss" scoped>
  $line-length: 20px; //线长
  $spacing: 20px; //间距
  $extend: calc(#{$spacing} + 2px); //延长线

  // 线样式
  @mixin line {
    content: "";
    display: block;
    width: 3px;
    height: $line-length;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    background: rgb(6, 183, 253);
  }
  // 加减号icon
  @mixin icon {
    position: absolute;
    border: solid 1px #666;
    border-radius: 100%;
    bottom: -5px;
    width: 12px;
    height: 12px;
    line-height: 10px;
    text-align: center;
    color: #666;
    z-index: 100;
    cursor: pointer;
    margin: 0;
    padding: 0;
    // opacity: 0;
  }

  .card {
    ul {
      display: flex;
      justify-content: center;
      li {

        .item {
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          &-name {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100px;
            height: 50px;
            padding: 5px;
            margin: $spacing;
            background: coral;
            color: #fff;
            .plus {
              @include icon();
              &:hover {
                opacity: 100%;
              }
            }
            .reduce {
              @include icon();
              top: -5px;
              &:hover {
                opacity: 100%;
              }
            }
          }
        }
      }
    }
    // 向下的线
    .line-bottom {
      &::after {
        @include line();
        bottom: -$line-length;
      }
    }
    // 向上的线
    .line-top {
      &::before {
        @include line();
        top: -$line-length;
      }
    }
    // 向左的线
    .line-left {
      &::after {
        @include line();
        width: calc(50% + #{$spacing});
        height: 3px;
        left: calc(-50% - #{$extend});
        top: 0;
      }
    }
    // 向右的线
    .line-right {
      &::before {
        @include line();
        width: calc(50% + #{$spacing});
        height: 3px;
        right: calc(-50% - #{$extend});
        top: 0;
      }
    }
  }
ul,li{margin:0px;padding:0px;list-style: none;}
</style>
